<template>
  <div>

    <el-row type="flex">
      <el-col>
        <el-select v-model="title" @change="changeRole" placeholder="请选择">
          <el-option
            v-for="item in categorys"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col>
        <el-button type="primary" @click="addBoard" >
          新增榜单
        </el-button>
      </el-col>
    </el-row>


    <div style="margin-top: 30px">
      <el-row>
        <el-col
          :span="5"
          v-for="detail in boards"
          :key="detail.id"
          :offset="1"
          style="margin-left: 5px"
        >
          <el-card :body-style="{ padding: '10px', height:'220px'}" shadow="hover" style="height: 200px; margin-bottom: 15px">
            <div style="padding: 6px;height: 120px">
              <p class="title">{{detail.title}}</p>
              <img :src="detail.logo" class="image">

            </div>
            <div style="height: 40px; float: bottom">
              <el-button type="text" @click="del(detail)" class="button">删除</el-button>
              <el-button type="text" @click="edit(detail)" class="button">编辑</el-button>
            </div>
          </el-card>
        </el-col>


      </el-row>
    </div>



  </div>

</template>

<script>


  export default {
    name: 'BiliBoard',
    data(){
      return{
        categoryId:0,
        title:'全部',
        categorys:[{
          title:'全部'
        }],
        boards:[],
        loading: false,
        urlList:[],
        inputTitle:'',
        subTitle:''
      }
    },
    mounted() {
      this.loadData()
    },
    activated(){
      this.loadBoards()
    },
    methods: {

      edit(boardInfo){
        this.$router.push({
          name:'addBoard',
          query:{
            categoryId:this.categoryId,
            boardId:boardInfo.id
          }
        })
      },
      del(boardInfo){
        return this.$confirm("是否确定删除此榜单？").then(() => {

          this.getAxios('billboard/delete',{
            id:boardInfo.id
          }).then(res => {
            this.$message({
              type:'success',
              message:'删除成功'
            });
            this.boards.rmove(boardInfo)
          }).catch(error => {
            this.$message({
              type:'info',
              message:error.msg
            });
          })
        }).catch(error =>{

        })
      },
      changeRole(val){
        this.categoryId = val
        this.loadBoards()
      },
      loadData(){
        this.getAxios('boardCategory/pageList').then(res => {
          this.categorys = this.categorys.concat(res.data)
          let category = this.categorys[0]
          this.categoryId = category.id
          this.loadBoards()
        }).catch( error => {
          this.$message({
            type:'info',
            message:error.msg
          });
        })
      },
      loadBoards(){
        this.getAxios('billboard/pageList',{
          categoryId:this.categoryId
        }).then(res => {
          this.boards = res.data
        }).catch(error => {
          this.$message({
            type:'info',
            message:error.msg
          });
        })
      },
      addBoard(){
        if (this.isEmpty(this.categoryId) || this.categoryId < 1){
          this.$message({
            type:'info',
            message:'请选择分类'
          })
          return
        }
        this.$router.push({
          name:'addBoard',
          query:{
            categoryId:this.categoryId
          }
        })
      }

    }
  }
</script>

<style scoped>

  .title{
    margin-top: 0px;
    margin-bottom: 0px;
    height: 30px;
  }
  .image {
    width: 100%;
    display: block;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }

</style>
